{% extends "base.html" %}
{% block title %}UNITY 3D - OnlineMachines{% endblock %}
{% block page_content %}
    <div class="page-header">
        {% if current_user.is_authenticated %}
            {% include '_machine_dashboard.html' %}
            <div class="panel panel-default" style="margin-top: 40px">
                <div class="panel-heading">
                    <h3 class="panel-title" style="font-size: x-large;">
                        <i class="fa fa-sitemap"></i>
                        Online Machines
                    </h3>
                </div>
                <div class="panel-body">
                    <table id="online_machine_table"></table>
                    <div id="toolbar" >
                        <button id="initBtn" class="btn btn-primary">
                            <i class="fa fa-spinner"></i>
                            Initalize
                        </button>
                        <button id="rebootBtn" class="btn btn-danger">
                            <i class="fa fa-repeat"></i>
                            Reboot
                        </button>
                    </div>
                </div>
            </div>
        {% else %}
            <h2>Welcome to Unity3D Cloud Factory.</h2>
            <p>
                <a href="{{ url_for('auth.register') }}">
                Click here to register
                </a>
            </p>
        {% endif %}
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static', filename='bootstrap-table.js') }}"></script>
    <script src="{{ url_for('static', filename='jQuery-Knob/dist/jquery.knob.min.js') }}"></script>
	<script>
    var address = '';
    var flag = false;
    window.operateEvents = {
        'click .edit_machine': function (e, value, row, index) {
            address = row['address'];
            $('#myModalLabel').text("Machine Address-" + row['address']);
            $('#myModal').modal('show');

            //alert('You click like icon, row: ' + JSON.stringify(row));
        }
    };
    function myInterval(){
        $.getJSON("/online-machines", { cmd: 'machine_info'},
        function (data) { 
            $('#online_machine_table').bootstrapTable('load', data);
            $(".temperature_nozzle").knob();
         });
    }
    $('#myModal').on('shown.bs.modal', function (e) {
        flag = true;
    })
    $('#myModal').on('hidden.bs.modal', function (e) {
        flag = false;
    })
    function machine_dashboard_Interval(){
        if(flag == true){
            $.getJSON("/online-machines", { cmd: 'machine_info'},
            function (data) { 
                for(var i = 0;i<data.length;i++){
                    if(data[i]['address'] == address){
                        $(".temperature_nozzle").val(parseInt(data[i]["temp_nozzle"])).trigger("change");
                        $(".temperature_bed").val(parseInt(data[i]["temp_bed"])).trigger("change");
                    }
                }
             });
        }
    }
    $(function() {
        $(".set_temperature_nozzle").knob({
            change : function (value) {
                        console.log("change : " + value);
                        $.getJSON("/set_online_machine_state", { address:address, cmd : 'M104 S' + parseInt(value)},
                        function (data) { 
                         });
                    }
        });
        $(".temperature_nozzle").knob();

        $(".set_bed_temperature").knob({
            change : function (value) {
                        console.log("change : " + value);
                        $.getJSON("/set_online_machine_state", { address:address, cmd : 'M140 S' + parseInt(value)},
                        function (data) { 
                         });
                    }
        });;
        $(".bed_temperature").knob();

        $(".set_printer_speed").knob({
            change : function (value) {
                        console.log("change : " + value);
                        $.getJSON("/set_online_machine_state", { address:address, cmd : 'M220 S' + parseInt(value)},
                        function (data) { 
                         });
                    }
        });;
        $(".printer_speed").knob();
    });

    $(window).ready(function () {
        setInterval("myInterval()", 5000);
        setInterval("machine_dashboard_Interval()", 1000);

        function getSelectionMahineAddrs() {
            var addrs =  $('#online_machine_table').bootstrapTable('getAllSelections');
            var address = []
            for(var i =0;i<addrs.length;i++){
                address.push(addrs[i]['address']);
            }
            return address;
        }
        $('#online_machine_table').bootstrapTable({
            url:'/online-machines?cmd=machine_info',
            search:true,
            showRefresh:true,
            pagination:true,
            pageNumber:1,
            pageSize:10,
            pageList: [10, 25, 50, 100],
            toolbar: '#toolbar',
            columns: [
            {
                checkbox: true,
                align: 'center',
                valign: 'middle'
            }, {
                field: 'index',
                title: 'index',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    return index+1;
                }
            }, {
                field: 'address',
                title: 'address',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'type',
                title: 'type',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'state',
                title: 'state',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'task_info',
                title: 'task',
                align: 'left',
                valign: 'middle'
            }, {
                field: 'temp_nozzle',
                title: 'temp_nozzle',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'temp_bed',
                title: 'temp_bed',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'x_size',
                title: 'x',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'y_size',
                title: 'y',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'z_size',
                title: 'z',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'material',
                title: 'material',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'material_color',
                title: 'color',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'nozzle_size',
                title: 'nozzle',
                align: 'center',
                valign: 'middle'
            },{
                field: 'worked_time',
                title: 'worked_time',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'operate',
                title: 'operate',
                align: 'center',
                valign: 'middle',
                formatter : function (value, row, index) {
                    return '<a class="edit_machine" href="javascript:void(0)">' +
                            '<i class="fa fa-pencil-square-o fa-lg" style="cursor: hand; cursor: pointer"></i></a>';
                },
                events: 'operateEvents'
            }],
            onRefresh: function () {
            }
        });

        $("#initBtn").click(function () {
            address = getSelectionMahineAddrs();
            $.ajax({
                type: "POST",
                url: "/init_online_machine",
                dataType: 'json',
                data: JSON.stringify(address),
                contentType: 'application/json; charset=UTF-8',
                traditional: true,
                success: function(){

                }
            });
        });
        })
	</script>
{% endblock %}

